<template>
    <div class="time-container">
        <el-button mt12 ml12 @click="handleWork">弹窗</el-button>
        <div class="time-content">
            <div class="main-part">
                <div>
                    <ul class="flip">
                        <li class="item" v-for="item in hourOneList" :key="item"
                            :class="{ 'before': hourNumOne - 1 == item, 'active': hourNumOne == item }">
                            <div class="top">
                                <div class="shadow"></div>
                                <div class="inn">
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                            <div class="down">
                                <div class="shadow"></div>
                                <div class="inn">
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul class="flip">
                        <li class="item" v-for="item in hourTwoList" :key="item"
                            :class="{ 'before': hourNumTwo - 1 == item, 'active': hourNumTwo == item }">
                            <div class="top">
                                <div class="shadow"></div>
                                <div class="inn">
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                            <div class="down">
                                <div class="shadow"></div>
                                <div class="inn">
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="spin"></div>
                <div>
                    <ul class="flip">
                        <li class="item" v-for="item in minOneList" :key="item"
                            :class="{ 'before': item == 5?minNumOne == 0 : minNumOne - 1 == item, 'active': minNumOne == item }">
                            <div class="top">
                                <div class="shadow"></div>
                                <div class="inn">
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                            <div class="down">
                                <div class="shadow"></div>
                                <div class="inn">
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul class="flip">
                        <li class="item" v-for="item in minTwoList" :key="item"
                            :class="{ 'before':  item == 9?minNumTwo == 0: minNumTwo - 1 == item, 'active': minNumTwo == item }">
                            <div class="top">
                                <div class="shadow"></div>
                                <div class="inn">
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                            <div class="down">
                                <div class="shadow"></div>
                                <div class="inn">
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="spin"></div>
                <div>
                    <ul class="flip">
                        <li class="item" v-for="item in minOneList" :key="item"
                            :class="{ 'before': item == 5 ? secondNumOne == 0 :secondNumOne - 1 == item, 'active': secondNumOne == item }">
                            <div class="top">
                                <div class="shadow"></div>
                                <div class="inn">
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                            <div class="down">
                                <div class="shadow"></div>
                                <div class="inn">
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul class="flip">
                        <li class="item" v-for="item in minTwoList" :key="item"
                            :class="{ 'before': item == 9 ? secondNumTwo == 0 : secondNumTwo - 1 == item, 'active': secondNumTwo == item }">
                            <div class="top">
                                <div class="shadow"></div>
                                <div class="inn">
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                            <div class="down">
                                <div class="shadow"></div>
                                <div class="inn">
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <countdownToWork ref="workRef"/>
    </div>
</template>

<script setup lang="ts" name="timeModule">
import countdownToWork from './modal/countdownToWork.vue'

type WorkType = InstanceType<typeof countdownToWork>
const workRef = ref<WorkType>()

const handleWork = () => {
    workRef.value?.handleShow()
}

const hourOneList = [0, 1, 2]
const hourTwoList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
const minOneList = [0, 1, 2, 3, 4, 5]
const minTwoList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

const hourNumOne = ref(0)
const hourNumTwo = ref(0)
const minNumOne = ref(0)
const minNumTwo = ref(0)
const secondNumOne = ref(0)
const secondNumTwo = ref(0)

let timer:any = null

onMounted(() => {
    timer = setInterval(() => {
        const time = new Date()
        hourNumOne.value = parseInt(time.getHours().toString().substring(0, 1))
        hourNumTwo.value = parseInt(time.getHours().toString().substring(1, 2))
        minNumOne.value = parseInt(time.getMinutes().toString().substring(0, 1))
        minNumTwo.value = parseInt(time.getMinutes().toString().substring(1, 2))
        secondNumOne.value = parseInt(time.getSeconds().toString().substring(0, 1))
        secondNumTwo.value = parseInt(time.getSeconds().toString().substring(1, 2))
        if (time.getSeconds() < 10) {
            secondNumOne.value = 0
            secondNumTwo.value = parseInt(time.getSeconds().toString().substring(0, 1))
        }
        if (time.getMinutes() < 10) {
            minNumOne.value = 0
            minNumTwo.value = parseInt(time.getMinutes().toString().substring(0, 1))
        }
        if (time.getHours() < 10) {
            hourNumOne.value = 0
            hourNumTwo.value = parseInt(time.getHours().toString().substring(0, 1))
        }
    }, 1000)
})

onUnmounted(() => {
    clearInterval(timer)
})

</script>

<style scoped lang="scss">
.time-container {
    @apply w-full h-full;
    position: relative;

    .time-content {
        background-color: black;
        height: 65%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px 80px;

        .main-part {
            display: flex;
            align-items: center;
            margin-top: -1.6em;
            background-color: #000;
            justify-content: center;

            .flip {
                --width: 7.55em;
                --height: 11.62em;
                --fontSize: 10em;
                --lineWidth: 10px;
                --radius: 15px;
                position: relative;
                margin: 5px;
                width: var(--width);
                height: var(--height);
                font-weight: 700;
                line-height: calc(var(--height) - var(--lineWidth));
                border-radius: var(--radius);
                box-shadow: 0 1px 10px #000000b3;
                overflow: hidden;

                .item {
                    z-index: 1;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    list-style-type: none;
                    //background-color: #000;
                    perspective: 12.5em;


                    .top,
                    .down {
                        width: 100%;
                        height: 50%;
                        position: absolute;
                        left: 0;
                        overflow: hidden;
                        z-index: 1;
                    }

                    .top {
                        top: 0;
                        transform-origin: 50% 100%;

                        .inn {
                            top: 0;
                        }
                    }

                    .down {
                        bottom: 0;
                        transform-origin: 50% 0%;
                        transition: opacity .3s;

                        .inn {
                            bottom: 0;
                        }
                    }

                    .top::after {
                        content: "";
                        position: absolute;
                        top: calc(100% - var((--lineWidth))/2);
                        left: 0;
                        z-index: 5;
                        width: 100%;
                        height: var(--lineWidth);
                        background-color: #000c;
                    }

                    .inn {
                        left: 0;
                        position: absolute;
                        width: 100%;
                        height: 200%;
                        color: #ccc;
                        z-index: 1;
                        text-shadow: 0 1px 2px #000;
                        text-align: center;
                        background-color: #791e1e;
                        border-radius: var(--radius);
                        font-size: var(--fontSize);
                    }


                    .shadow {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        z-index: 2;
                    }
                }

                .item:first-child {
                    z-index: 2;
                }

                .before {
                    z-index: 3 !important;
                    .top {
                        z-index: 2;
                        animation: turn-up .5s linear both;

                        .shadow {
                            background: linear-gradient(rgba(0, 0, 0, .1) 0%, #000000 100%);
                            animation: show .5s linear both;
                        }

                    }

                    .down {
                        .shadow {
                            background: linear-gradient(#000000 0%, rgba(0, 0, 0, .1) 100%);
                            animation: show .5s linear both;
                        }
                    }
                }

                .active {
                    z-index: 2;
                    animation: pageChange .5s .5s linear both;
                    background-color: #000;

                    .top {
                        .shadow {
                            background: linear-gradient(rgba(0, 0, 0, .1) 0%, #000000 100%);
                            animation: hide .5s .3s linear both;
                        }
                    }

                    .down {
                        z-index: 2;
                        animation: turn-down .5s .5s linear both;

                        .shadow {
                            background: linear-gradient(#000000 0%, rgba(0, 0, 0, .1) 100%);
                            animation: hide .5s .3s linear both;
                        }
                    }
                }

                @keyframes pageChange {
                    0% {
                        z-index: 2;
                    }

                    5% {
                        z-index: 4;
                    }

                    100% {
                        z-index: 4;
                    }
                }

                @keyframes turn-up {
                    0% {
                        transform: rotateX(0);
                    }

                    100% {
                        transform: rotateX(-90deg);
                    }
                }

                @keyframes turn-down {
                    0% {
                        transform: rotateX(90deg);
                    }

                    100% {
                        transform: rotateX(0);
                    }
                }

                @keyframes hide {
                    0% {
                        opacity: 1;
                    }

                    100% {
                        opacity: 0;
                    }
                }

                @keyframes show {
                    0% {
                        opacity: 0;
                    }

                    100% {
                        opacity: 1;
                    }
                }
            }

            .spin {
                height: 50px;
                padding: 0 10px;
                justify-content: space-around;
                flex-direction: column;
                display: flex;


            }

            .spin::before,
            .spin::after {
                content: "";
                display: block;
                width: 10px;
                height: 10px;
                background: rgba(255, 255, 255, .7);
                border-radius: 50%;
            }
        }
    }
}
</style>